<template>
  <view class="container">
    <up-grid>
      <up-grid-item> </up-grid-item>
    </up-grid>
    <view class="position-relative">
      <image src="/static/images/mine/mine_bg.png" class="bg"></image>
      <button type="default" size="mini" class="hym-btn" @tap="memberCode">
        <image src="/static/images/home/qrcode.png"></image>
        <text>会员码</text>
      </button>
    </view>

    <view style="padding: 0 30rpx">
      <!-- user box begin -->
      <view class="d-flex flex-column bg-white user-box">
        <view class="d-flex align-items-center">
          <view class="avatar">
            <image
              :src="userStore.token ? userStore.avatar : '/static/images/mine/default.png'"
            ></image>
            <view class="badge" v-if="userStore.token">
              <image src="/static/images/mine/level.png"></image>
              <view>{{ member.memberLevel }}</view>
            </view>
          </view>
          <view
            class="d-flex flex-column flex-fill overflow-hidden"
            style="margin-top: 20rpx"
          >
            <view
              v-if="userStore.token"
              class="font-size-lg font-weight-bold d-flex justify-content-start align-items-center"
              @tap="userinfo"
            >
              <view class="text-truncate">{{ member.nickname }}</view>
              <view class="iconfont iconarrow-right line-height-100"></view>
            </view>
            <view v-else class="font-size-lg font-weight-bold" @tap="login"
              >请点击授权登录</view
            >
            <view class="font-size-sm text-color-assist">
              当前成长值{{ userStore.token ? 0 : 0 }}/{{ userStore.token ? 0 : 0 }}
            </view>
            <view class="w-100">
              <progress
                percent="0"
                activeColor="#ADB838"
                height="8rpx"
                :percent="growthValue"
                border-radius="8rpx"
              />
            </view>
          </view>
          <view
            class="level-benefit d-flex flex-shrink-0 align-items-center justify-content-end text-color-white bg-warning font-size-sm"
          >
            <view>会员权益</view>
            <view class="iconfont iconarrow-right line-height-100"></view>
          </view>
        </view>
        <!-- user grid begin -->
        <up-grid :border="false" col="2" @click="clickMenu">
          <up-grid-item>
            <up--text
              color="#5A5B5C"
              size="20"
              bold
              :text="isLogin ? member.couponNum : '***'"
              align="center"
            ></up--text>
            <up--text
              color="#919293"
              class="grid-text"
              text="优惠券"
              size="14"
              align="center"
            ></up--text>
          </up-grid-item>
          <up-grid-item>
            <up--text
              color="#5A5B5C"
              size="20"
              bold
              :text="userStore.token?member.integral:'***'"
              align="center"
            ></up--text>
            <up--text
              color="#919293"
              class="grid-text"
              text="我的积分"
              size="14"
              align="center"
            ></up--text>
          </up-grid-item>
        </up-grid>
      </view>
      <!-- user box end -->
      <!-- level benefit box begin -->
      <view class="level-benefit-box" v-if="!userStore.token">
        <view
          class="d-flex align-items-center justify-content-between font-size-base"
        >
          <view class="text-color-base" style="font-size: 34rpx"
            >新用户加入会员，享会员权益</view
          >
          <view
            class="text-color-primary"
            style="color: rgb(250, 180, 65)"
            @tap="login"
            >立即加入</view
          >
        </view>

        <up-grid :border="false" @click="click" col="4">
          <up-grid-item>
            <up-icon
              :customStyle="{ paddingTop: 20 + 'rpx' }"
              name="gift"
              :size="30"
              color="#f9ae3d"
            ></up-icon>
            <up--text
              class="grid-text"
              color="#919293"
              size="14"
              text="入会有礼"
              align="center"
            ></up--text>
          </up-grid-item>
          <up-grid-item>
            <up-icon
              :customStyle="{ paddingTop: 20 + 'rpx' }"
              name="integral"
              :size="30"
              color="#f9ae3d"
            ></up-icon>
            <up--text
              class="grid-text"
              color="#919293"
              size="14"
              text="积分兑换"
              align="center"
            ></up--text>
          </up-grid-item>
          <up-grid-item>
            <up-icon
              :customStyle="{ paddingTop: 20 + 'rpx' }"
              name="heart"
              :size="30"
              color="#f9ae3d"
            ></up-icon>
            <up--text
              class="grid-text"
              color="#919293"
              size="14"
              text="升级特权"
              align="center"
            ></up--text>
          </up-grid-item>
          <up-grid-item>
            <up-icon
              :customStyle="{ paddingTop: 20 + 'rpx' }"
              name="bag"
              :size="30"
              color="#f9ae3d"
            ></up-icon>
            <up--text
              class="grid-text"
              color="#919293"
              size="14"
              text="生日特权"
              align="center"
            ></up--text>
          </up-grid-item>
        </up-grid>
      </view>
      <!-- level benefit box end -->
      <!-- banner begin -->
      <view class="banner-box">
        <up--image
          src="../../static/images//mine/banner.png"
          height="200rpx"
          width="700rpx"
          mode="widthFix"
        />
      </view>
      <!-- bennaer end -->
    </view>
    <!-- service box begin -->
    <view class="service-box">
      <view
        class="font-size-lg text-color-base font-weight-bold"
        style="margin-bottom: 20rpx"
        >我的服务</view
      >
      <up-grid :border="false" @click="clickServiceMenu" col="4">
				<up-grid-item v-for="item in servieMenuList" :key="item.name">
					<u-icon :customStyle="{ paddingTop: 20 + 'rpx' }" :name="item.icon" :size="30" color="#f9ae3d"></u-icon>
					<up--text class="grid-text" color="#919293" size="14" :text="item.name" align="center"></up--text>
				</up-grid-item>
			</up-grid>
    </view>
    <!-- service box end -->
    <!-- tips begin -->
    <view
      class="d-flex just-content-center align-items-center text-color-assist"
      style="padding: 30rpx 0; font-size: 22rpx"
    >
      会员卡适用于某奶茶店指定范围
    </view>
    <!-- tisps end -->
  </view>
</template>

<script setup lang="ts">
import { reactive,onMounted } from "vue";
import { useUserStore } from "@/store/modules/user";
import {getMembersInfo} from "@/api/members"
import { to } from "await-to-js";

const userStore = useUserStore()
userStore.getInfo()
const data = reactive({ 
  member:{
    memberLevel: "", 
    nickname: "",
    integral:""
  } 
});
const { member } = toRefs(data);
const servieMenuList = reactive([
  {
    name: "积分签到",
    icon: "calendar",
    path: "/pages/attendance/attendance",
  },
  {
    name: "积分商城",
    icon: "gift",
    path: "/pages/integrals/integrals",
  },
  {
    name: "联系客服",
    icon: "server-fill",
    path: "",
  },
  {
    name: "我的订单",
    icon: "file-text",
    path: "/pages/order/index",
  },
  {
    name: "我的资料",
    icon: "account",
    path: "/pages/mine/userinfo",
  },
  {
    name: "收货地址",
    icon: "map",
    path: "/pages/address/index",
  },
  {
    name: "更多服务",
    icon: "more-dot-fill",
    path: "/pages/services/services",
  },
]);
const login = () => {
  uni.navigateTo({
    url: "/pages/login/login",
  });
};
const clickMenu = (index: Number) => {
  let path = "";
  switch (index) {
    case 0:
      path = "/pages/coupon/index";
      break;
    case 1:
      path = "/pages/integrals/integrals";
      break;
    case 2:
      break;
    case 3:
      path = "/pages/coupon/index";
      break;
  }

  uni.navigateTo({
    url: path,
  });
};
const clickServiceMenu = (index: Number) => {
  if (index == 3) {
    uni.switchTab({
      url: servieMenuList[index].path,
    });
    return;
  }

  uni.navigateTo({
    url: servieMenuList[index].path,
  });
};

// 获取会员信息
const  getMembers = async()=>{
  const [err, res] = await to(getMembersInfo());
  if(res) {
    member.value = res.data
  }

}
getMembers()
onMounted(()=>{
  console.log('>>>','onMounted')
  getMembers()
})


</script>

<style lang="scss" scoped>
page {
  height: auto;
  min-height: 100%;
}

.bg {
  width: 100%;
  height: calc(410 / 594 * 750rpx);
}

.hym-btn {
  position: absolute;
  top: 40rpx;
  right: 40rpx;
  //color: $color-primary;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50rem;
  //font-size: $font-size-sm;
  box-shadow: 0 0 20rpx rgba(66, 66, 66, 0.1);

  &::after {
    border: 0;
  }

  image {
    width: 30rpx;
    height: 30rpx;
    margin-right: 10rpx;
  }
}

.user-box {
  position: relative;
  border-radius: 8rpx;
  margin-bottom: 30rpx;
  margin-top: -115rpx;
  padding: 0 0 30rpx 0;
  box-shadow: 0 16rpx 16rpx -16rpx rgba(51, 51, 51, 0.1);
}

.avatar {
  position: relative;
  margin-top: -35rpx;
  margin-left: 35rpx;
  margin-right: 35rpx;
  width: 160rpx;
  height: 160rpx;
  border-radius: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ffffff;
  box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.2);

  image {
    width: 140rpx;
    height: 140rpx;
    border-radius: 100%;
  }

  .badge {
    position: absolute;
    right: -10rpx;
    bottom: -10rpx;
    background-color: #ffffff;
    border-radius: 50rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgb(249, 174, 61);
    font-size: 24rpx;
    padding: 8rpx 16rpx;
    box-shadow: 0 0 16rpx rgba(0, 0, 0, 0.2);

    image {
      width: 30rpx;
      height: 30rpx;
    }
  }
}

.level-benefit {
  margin-left: 35rpx;
  padding: 10rpx 0 10rpx 30rpx;
  border-radius: 50rem 0 0 50rem;
}

.user-grid {
  width: 25%;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .value {
    margin-bottom: 20rpx;
  }
}

.level-benefit-box {
  border-radius: 8rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 8rpx 6rpx rgba(135, 136, 137, 0.1);
  width: 100%;
  display: flex;
  padding: 30rpx;
  flex-direction: column;
  background-color: #ffffff;
}

.banner-box {
  width: 100%;
  border-radius: 8rpx;
  margin-bottom: 30rpx;
  height: 200rpx;
  overflow: hidden;
}

.service-box {
  width: 100%;
  background-color: #ffffff;
  padding: 32rpx 30rpx 10rpx;
  box-shadow: 0 16rpx 16rpx -16rpx rgba(51, 51, 51, 0.1);
}
</style>
